import 'package:flutter/material.dart';

// 定义按钮文本颜色常量
const Color kButtonTextColor = Colors.orange;

// 封装 TextField 组件
Widget buildTextField({
  required String labelText,
  required String hintText,
  required IconData prefixIcon,
  bool obscureText = false,
  FocusNode? focusNode,
  required Function(String) onChanged,
}) {
  //监听焦点状态改变事件
  focusNode?.addListener(() {
    print("$labelText hasFocus: ${focusNode?.hasFocus}");
  });
  return TextField(
    focusNode: focusNode,
    onChanged: onChanged,
    decoration: InputDecoration(
      labelText: labelText,
      hintText: hintText,
      prefixIcon: Icon(prefixIcon),
      // 未获得焦点下划线设为灰色
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.grey),
      ),
      //获得焦点下划线设为蓝色
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.blue),
      ),
    ),
    obscureText: obscureText,
  );
}

// 输入框展示页面
class TextFieldPage extends StatelessWidget {
  const TextFieldPage({super.key});

  @override
  Widget build(BuildContext context) {
    final firstFocusNode = FocusNode();
    final secondFocusNode = FocusNode();

    TextEditingController _unameController = TextEditingController();
    TextEditingController _pwdController = TextEditingController();
    GlobalKey _formKey = GlobalKey<FormState>();

    return Scaffold(
      appBar: AppBar(title: const Text('输入框组件')),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          Card(
            margin: const EdgeInsets.only(bottom: 20),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                children: [
                  buildTextField(
                    labelText: "用户名",
                    hintText: "用户名或邮箱",
                    prefixIcon: Icons.person,
                    focusNode: firstFocusNode,
                    onChanged: (v) {
                      print("onChange: $v");
                    },
                  ),
                  const SizedBox(height: 20),
                  buildTextField(
                    labelText: "密码",
                    hintText: "您的登录密码",
                    prefixIcon: Icons.lock,
                    focusNode: secondFocusNode,
                    obscureText: true,
                    onChanged: (v) {
                      print("onChange: $v");
                    },
                  ),
                  const SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          foregroundColor: kButtonTextColor,
                        ),
                        onPressed:
                            () => FocusScope.of(
                              context,
                            ).requestFocus(secondFocusNode),
                        child: const Text('切换焦点'),
                      ),
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          foregroundColor: kButtonTextColor,
                        ),
                        onPressed:
                            () => FocusManager.instance.primaryFocus?.unfocus(),
                        child: const Text('关闭键盘'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Form(
                child: Column(
                  children: [
                    TextFormField(
                      autofocus: true,
                      controller: _unameController,
                      decoration: const InputDecoration(
                        labelText: '用户名',
                        hintText: '用户名或邮箱',
                        prefixIcon: Icon(Icons.person_outline),
                      ),
                      validator: (value) {
                        return value!.trim().isNotEmpty ? null : '用户名不能为空';
                      },
                    ),
                    const SizedBox(height: 20),
                    TextFormField(
                      controller: _pwdController,
                      obscureText: true,
                      decoration: const InputDecoration(
                        labelText: '密码',
                        hintText: "您的登录密码",
                        prefixIcon: Icon(Icons.lock_outline),
                      ),
                      validator: (value) {
                        return value!.trim().isNotEmpty ? null : '密码不能少于6位';
                      },
                    ),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        foregroundColor: kButtonTextColor,
                      ),
                      onPressed: () {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(
                            content: Text(
                              '用户名：${_unameController.text} 密码：${_pwdController.text}',
                            ),
                            duration: Duration(seconds: 2),
                          ),
                        );
                      },
                      child: const Text('登录'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
